<!-- 平台视角组件 -->
<template>
  <div class="platform-view">
    <div class="map-container" id="platformMap">
      <div class="map-overlay">
        <div class="view-controls">
          <el-button-group size="small">
            <el-button @click="toggle2D3D">
              <el-icon><Grid /></el-icon>
              {{ is3DView ? '2D' : '3D' }}
            </el-button>
            <el-button @click="centerView">
              <el-icon><Location /></el-icon>
              居中
            </el-button>
            <el-button @click="fullscreenView">
              <el-icon><FullScreen /></el-icon>
              全屏
            </el-button>
          </el-button-group>
        </div>
      </div>
      
      <!-- 地图内容区域 -->
      <div class="map-content">
        <div class="map-placeholder">
          <!-- 这里将集成 Cesium.js 或 OpenLayers -->
          <div class="map-info">
            <h3>{{ is3DView ? '三维地球视图' : '二维态势视图' }}</h3>
            <p>{{ is3DView ? 'Cesium.js 地图引擎' : 'OpenLayers 地图引擎' }}</p>
            <div class="platform-markers">
              <div 
                v-for="platform in platformData" 
                :key="platform.id"
                class="platform-marker"
                :class="platform.status"
              >
                <el-icon><Position /></el-icon>
                <span>{{ platform.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Grid, Location, FullScreen, Position } from '@element-plus/icons-vue'

// Props
defineProps({
  platformData: {
    type: Array,
    default: () => []
  }
})

// Emits
const emit = defineEmits([
  'viewModeChange',
  'centerMap',
  'fullscreen'
])

// 视图状态
const is3DView = ref(true)

// 方法定义
const toggle2D3D = () => {
  is3DView.value = !is3DView.value
  emit('viewModeChange', { is3D: is3DView.value })
  ElMessage.info(`已切换到 ${is3DView.value ? '3D' : '2D'} 视图`)
}

const centerView = () => {
  emit('centerMap')
  ElMessage.info('视图已居中')
}

const fullscreenView = () => {
  emit('fullscreen')
  ElMessage.info('切换全屏显示')
}

// 初始化地图（预留接口）
const initializeMap = () => {
  // 这里将初始化 Cesium 或 OpenLayers
  console.log('初始化地图引擎...')
}

// 组件挂载时初始化
import { onMounted } from 'vue'
onMounted(() => {
  initializeMap()
})
</script>

<style scoped>
.platform-view {
  height: 100%;
  position: relative;
}

.map-container {
  height: 100%;
  position: relative;
  background: #0a0f1b;
  border-radius: 0.8vh;
  overflow: hidden;
}

.map-overlay {
  position: absolute;
  top: 1vh;
  right: 1vw;
  z-index: 10;
}

.view-controls .el-button {
  background: rgba(38, 52, 69, 0.9);
  border-color: #2d3a4b;
  color: #bfcbd9;
  backdrop-filter: blur(4px);
}

.view-controls .el-button:hover {
  background: rgba(45, 58, 75, 0.9);
  border-color: #409EFF;
  color: #409EFF;
}

.map-content {
  height: 100%;
  width: 100%;
}

.map-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a0f1b 0%, #1a2332 100%);
  position: relative;
}

.map-info {
  text-align: center;
  color: #bfcbd9;
}

.map-info h3 {
  margin: 0 0 1vh 0;
  font-size: 1.5rem;
  color: #409EFF;
}

.map-info p {
  margin: 0 0 2vh 0;
  color: #8591a3;
  font-size: 0.9rem;
}

.platform-markers {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  margin-top: 3vh;
}

.platform-marker {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  padding: 1vh 1.5vw;
  background: rgba(38, 52, 69, 0.6);
  border-radius: 0.8vh;
  border-left: 4px solid transparent;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.platform-marker.active {
  border-left-color: #67C23A;
  background: rgba(38, 52, 69, 0.8);
}

.platform-marker.inactive {
  border-left-color: #E6A23C;
  background: rgba(38, 52, 69, 0.4);
  opacity: 0.7;
}

.platform-marker span {
  font-size: 0.9rem;
  color: #bfcbd9;
}

.platform-marker .el-icon {
  color: #409EFF;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .map-overlay {
    top: 0.5vh;
    right: 0.5vw;
  }
  
  .view-controls .el-button {
    padding: 0.5vh 1vw;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .platform-markers {
    gap: 0.5vh;
  }
  
  .platform-marker {
    padding: 0.8vh 1.2vw;
    font-size: 0.8rem;
  }
  
  .map-info h3 {
    font-size: 1.2rem;
  }
}
</style>